<template>
    <div class="menu">
        <div style="position: relative;">
            <van-search v-model="value" placeholder="OPPOA3" />
            <van-button plain type="primary" style="position: absolute;right: 0;top: 0;">登录</van-button>
        </div>
        <router-view></router-view>
        <!-- 标签栏 -->
        <van-tabbar v-model="active" route>
  <van-tabbar-item replace :to="item.path" :icon="item.icon" v-for="item in tabbar" :key="item">{{item.title}}</van-tabbar-item>
</van-tabbar>

    </div>
</template>

<script setup>
import {ref, watch} from 'vue'
import {useRouter,useRoute} from 'vue-router'
const router=useRouter()
const route=useRoute()
let title=ref('')
let tabbar=ref([
    {path:'/home/sy',title:'首页',icon:'home-o'},
    {path:'/home/classify',title:'分类',icon:'home-o'},
    {path:'/home/shopping',title:'购物车',icon:'home-o'},
    {path:'/home/my',title:'我的',icon:'home-o'},
])
watch(
    route,
    ({path})=>{
        const current=tabbar.value.find((item)=>item.path==path);
        title.value=current.title
    },
    {
        immediate:true
    }
)
</script>

<style scoped>
.menu {
    width: 100%;
    margin: auto;
    border-radius: 10px;
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}
</style>